<template>
  <div>
    <div id="chart1"></div>
    <div>
      123
    </div>
    <div id="chart2"></div>
    <div id="chart3"></div>
    <div id="chart4"></div>
  </div>


</template>

<script>
  import echarts from 'echarts'

  export default {
    name: 'myCharts',
    data() {
      return {
        option: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        },
        option4: {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015'],
              ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
              ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
              ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            ]
          },
          xAxis: [
            { type: 'category', gridIndex: 0 },
            { type: 'category', gridIndex: 1 }
          ],
          yAxis: [
            { gridIndex: 0 },
            { gridIndex: 1 }
          ],
          grid: [
            { bottom: '55%' },
            { top: '55%' }
          ],
          series: [
            // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            { type: 'bar', seriesLayoutBy: 'row' },
            { type: 'bar', seriesLayoutBy: 'row' },
            { type: 'bar', seriesLayoutBy: 'row' },
            // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
          ]
        }
      }
    },
    mounted() {
      this.$chart.line1('chart1')
      this.createEcharts()
      this.createEcharts3()
      this.createEcharts4()

    }, methods: {
      createEcharts() {
        this.chart = echarts.init(document.getElementById('chart2'))
        this.chart.clear()
        this.chart.setOption(this.option)
      },
      createEcharts3() {
        echarts.init(document.getElementById('chart3')).setOption({
          series: {
            type: 'pie',
            data: [
              { name: 'A', value: 1212 },
              { name: 'B', value: 2323 },
              { name: 'C', value: 1919 }
            ]
          }
        })
      },
      createEcharts4() {
        this.chart = echarts.init(document.getElementById('chart4'))
        this.chart.clear()
        this.chart.setOption(this.option4)
      }
      /* install(Vue) {
         console.log("Vue:")
         console.log(Vue)

         Object.defineProperties(Vue.prototype, {
           $chart: {
             get() {
               return {
                 //画一条简单的线
                 line1: function(id) {
                   this.chart = echarts.init(document.getElementById(id))
                   this.chart.clear()

                   const optionData = {
                     xAxis: {
                       type: 'category',
                       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                     },
                     yAxis: {
                       type: 'value'
                     },
                     series: [{
                       data: [820, 932, 901, 934, 1290, 1330, 1320],
                       type: 'line',
                       smooth: true
                     }]
                   }
                   this.chart.setOption(optionData)
                 }
               }
             }
           }
         })
       }*/
    }, created() {


      /* this.install()*/
    }
  }
</script>

<style scoped>
  #chart1 {
    width: 300px;
    height: 300px;
  }

  #chart2 {
    width: 800px;
    height: 300px;
    float: right;
    margin-left: 10px;
  }

  #chart3 {
    width: 800px;
    height: 300px;

  }

  #chart4 {
    width: 800px;
    height: 300px;
    /*float: right;
    margin-left: 10px;*/
  }
</style>